<template>
	<view class="cttit">
		<text>个人信息</text>
		<view class=""></view>
	</view>
	<view class="head" @click="getava">
		<image :src="userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
		<image src="../../static/defaluthead.png" mode="" v-else></image>
		<text>上传图片</text>
	</view>
	<!-- <view class="name">
		<text>昵称</text>
		<input type="text"  v-model="userInfo.nickName" placeholder="请输入" />
	</view> -->
	<view class="name">
		<text>ID:{{userInfo.userId}}</text>
		<!-- <input type="nickname" @blur="getname" v-model="userInfo.nickName" placeholder="请输入" /> -->
	</view>
	
	
	<view class="btn">
		<button class="submit"   @click="submit">确定</button>
		
	</view>
	
</template>

<script setup>
	import { updateUserInfo } from '../../api/account';
	import { uploadImage } from '../../utils/upload';
    import { ref,onMounted } from 'vue';
	let name=ref('')
	let userInfo=ref({
		avatar:'',
		nickName:''
	})
	function getava(e){
		uni.chooseImage({
			success: (res2) => {
			
			uploadImage(res2.tempFilePaths[0], (res) => {
					    userInfo.value.avatar=res.url
			  })
			}
		})
		
	
	}
	function getname(e){
		 userInfo.value.nickName=e.detail.value
	}

	function submit(){
		uni.showLoading({
			mask:true,
			title:"提交中..."
		})
			let data={
				avatar:userInfo.value.avatar,
				userId:userInfo.value.userId
			}
			 updateUserInfo(userInfo.value).then(res=>{
				  uni.hideLoading()
			 	  uni.switchTab({
			 	  	url:"/pages/mine/index"
			 	  })
			 })	
	}
	function cancel(){
		uni.showModal({
			title:"是否退出登录",
			success: (res) => {
				console.log(res)
				if(res.confirm){
					uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
					 uni.switchTab({
					 	url:"/pages/mine/index"
					 })
				}
			}
		})

	}
	onMounted(()=>{
		
		 userInfo.value=uni.getStorageSync('userInfo')
	})
	
</script>

<style lang="scss" scoped>
	.cttit {
		margin-top: 36rpx;
		margin-left: 56rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	
		// align-items: center;
		&>text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 24rpx;
			position: relative;
			z-index: 10;
		}
	
		view {
			width: 130rpx;
			height: 16rpx;
			border-radius: 20rpx;
			background: #C7A46F;
			position: absolute;
			bottom: -6rpx;
		}
	}
	.btn {
		position: fixed;
		width: 690rpx;
		left: 30rpx;
		bottom: 120rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		height: 88rpx;
		background: #C7A46F;
		
		text-align: center;
	
		button {
			height: 92rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			border-radius: 10rpx;
			color: #fff;
			background: #ccc;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
		}
		.submit{
			width: 690rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			height: 88rpx;
			background: #C7A46F;
			display: flex;
			align-items: center;justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
	
	
	button::after {
		border: none;
	}
	.name{
		width: 690rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx;
		display: flex;align-items: center;
		box-sizing: border-box;
		padding: 0 17rpx;
		// justify-content: space-between;
		text{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
		input{
			flex: 1;
			font-size: 30rpx;
			margin-left: 30rpx;
		}
	}
	.head{
		width: 690rpx;
		height: 138rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 40rpx 30rpx;
		display: flex;align-items: center;
		box-sizing: border-box;
		padding: 0 17rpx;
		justify-content: space-between;
		position: relative;
		image:nth-of-type(1){
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
		}
		text{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #C7A46F ;
		}
		button{
			position: absolute;
			width: 690rpx;
			height: 138rpx;
			left: 0;
			top:0;
			z-index: 3;
			opacity: 0;
		}
		
	}
</style>